<template>
  <!-- :visible="isShowDialog"用于控制对话框的显示和隐藏。
  @close="close"当对话框被关闭时触发该方法。 -->
  <!-- :close-on-click-modal="false"：这个属性用于设置是否在点击对话框外部区域时关闭对话框。 -->
  <el-dialog :title="title" :visible="isShowDialog" :close-on-click-modal="false" @close="close">
    <div class="form-container">
      <el-form ref="formData" class="form" :rules="rules" label-width="80px" size="mini" :model="formData">
        <!-- ref:点击提交按钮的来获取el-form组件实例->全部表单的效验 -->
        <!-- rules 表单效验规则 -->
        <!-- prop:是当前表单组件要验证的字段名称
        v-model是双向绑定 -->
        <!-- autocomplete="off" 禁止浏览器自动填充数据在表单 -->
        <el-form-item label="车辆类型" prop="name">
          <el-input v-model="formData.name" class="input-with-margin" autocomplete="off" placeholder="请输入车辆类型" style="width: 100%" size="medium " />
        </el-form-item>
        <el-form-item label="应载重量" prop="allowableLoad">
          <el-input v-model="formData.allowableLoad" class="input-with-margin" autocomplete="off" placeholder="请输入车型载重" style="width: 100%" size="medium ">
            <template slot="append">吨</template>
          </el-input>
        </el-form-item>
        <el-form-item label="应载体积" prop="allowableVolume">
          <el-input v-model="formData.allowableVolume" class="input-with-margin" autocomplete="off" placeholder="请输入车型体重" style="width: 100%" size="medium ">
            <template slot="append">立方</template>
          </el-input>
        </el-form-item>
        <el-form-item label="长" prop="measureLong">
          <el-input v-model="formData.measureLong" class="input-with-margin" autocomplete="off" placeholder="请输入长" style="width: 100%" size="medium ">
            <template slot="append">米</template>
          </el-input>
        </el-form-item>
        <el-form-item label="宽" prop="measureWidth">
          <el-input v-model="formData.measureWidth" class="input-with-margin" autocomplete="off" placeholder="请输入宽" style="width: 100%" size="medium ">
            <template slot="append">米</template>
          </el-input>
        </el-form-item>
        <el-form-item label="高" prop="measureHigh">
          <el-input v-model="formData.measureHigh" class="input-with-margin" autocomplete="off" placeholder="请输入高" style="width: 100%" size="medium ">
            <template slot="append">米</template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <!-- 具名插槽 ，用于插入自定义内容到对应的插槽位置。可以在组件的特定位置插入自定义的底部内容，
      从而实现定制化的对话框布局和功能。-->
    <div slot="footer" class="dialog-footer">
      <el-button class="stbList" @click="confirm">确认</el-button>
      <el-button class="addList" type="primary" @click="close">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addVehicleList, putUpdateVehicleList, getDetailVehicleList } from '@/api/vehicle'
export default {
  name: 'AddVehicle',
  props: {
    title: {
      type: String,
      // 在没有传入值时默认为字符串
      default: '新增车型'
    },
    isShowDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 表单数据
      formData: {
        // 车辆类型名称
        name: '',
        // 准载重量
        allowableLoad: '',
        // 准载体积
        allowableVolume: '',
        // 长
        measureLong: 0,
        // 宽
        measureWidth: 0,
        // 高
        measureHigh: 0
      },
      // 表单校验规则
      rules: {
        name: [
          { required: true, message: '车载名称不能为空', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '应载重量不能为空', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '应载体积不能为空', trigger: 'blur' }
        ],
        measureLong: [
          { required: true, message: '长最多只能输入100,请重新输入', trigger: 'blur' }
        ],
        measureWidth: [
          { required: true, message: '宽最多只能输入100,请重新输入', trigger: 'blur' }
        ],
        measureHigh: [
          { required: true, message: '高最多只能输入100,请重新输入', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    async confirm() {
      try {
        // 表单校验
        await this.$refs.formData.vaildate()
        // console.log('表单校验成功')
        if (this.formData.id) {
        // 发送更新请求
          await putUpdateVehicleList(this.formData)
        } else {
        // 发送新增请求
          await addVehicleList(this.formData)
          // 弹出提示
          this.$message.success('添加成功')
        }
        // 通知父组件,刷新数据
        this.$emit('refreshvehicle')
        // 关闭弹窗
        this.close()
      } catch (e) {
        console.log('表单效验失败', e)
      }
    },
    // 获取车型详情
    async getDetailVehicleList(id) {
      const result = await getDetailVehicleList(id)
      // console.log(result)
      // 数据回填
      this.formData = result.data
    },
    // 取消
    close() {
      // 重置表单
      this.$refs.formData.resetFields()
      // 关闭弹窗
      this.$emit('update:isShowDialog', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.input-with-margin {
  margin-bottom: 25px;
}
.form {
  width: 400px;
}
.dialog-footer{
  display: flex;
  align-content: center;
  justify-content: center;
}
  .stbList{
    color: white;
    background-color: rgb(227, 66, 66);
    border-color: rgba(0, 0, 0, 0);

  }
  .addList{
    color: black;
    background-color:white;
    border-color:black
  }
</style>
